<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	
	const loading = ref(false)
	const form = ref({
		status: 1,
		addrName: '',
		addr: '',
		expectedTime: '',
	})
	
	function goHome() {
		uni.switchTab({url: '/pages/tabbar/index'})
	}
	function navigation() {
		uni.openLocation({
			latitude: 30.057367,
			longitude: 103.190645,
			name: '茗山总仓'
		})
	}
	function statusToText(value) {
		switch(value) {
			case 1: return '现在支付';
			case 2: return '下单成功';
			case 3: return '待付尾款';
			case 4: return '尾款已付';
			default: return '未知'
		}
	}
	
	onLoad((option) => {
		let params = option.params
		if(params) {
			let data = JSON.parse(params) || {}
			form.value = data
		}
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<view class="success-box" v-if="[2,4].includes(form.status)">
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2024-11-18/1731915302994_registerSuccess.png"
					width="330" height="234"></uv-image>
				<text class="success-title">支付成功</text>
			</view>
			<view class="status-box success-title" v-else>
				<uv-icon name="clock" color="#328BFF" size="50" /><text>待付款</text>
			</view>
			<view class="content-box">
				<view class="tip-box">
					<uv-icon name="clock" color="#FF0D0D" size="30" bold />
					<text>
						<text>{{statusToText(form.status)}}</text>
						<text v-if="form.expectedTime && [1,2].includes(form.status)">，最早可于{{form.expectedTime}}后取货</text>
					</text>
				</view>
				<view class="address-box" v-if="[1,2].includes(form.status)">
					<view class="box-left">
						<view class="address-name">{{form.logisticsType === 2 ? '取货地点' : '自提点'}}：{{form.addr || '--'}}</view>
						<view class="address-detail">{{form.addrName || '--'}}</view>
					</view>
					<view class="box-right" v-if="form.logisticsType === 4" @click="navigation">
						<uv-icon name="map-fill" color="#767473" size="30" /><text>导航</text>
					</view>
				</view>
			</view>
			<view class="content-btn">
				<uv-button color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" :custom-style="{width: '343rpx'}" text="购买更多好货"
					@click="goHome"></uv-button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
	}
	.app-content{
		padding: 24rpx;
		background-color: #FFFFFF;
		.success-title{
			font-weight: 600;
			font-size: var(--theme-xl);
			line-height: var(--theme-xl-line);
		}
		.success-box{
			padding-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 32rpx;
		}
		.status-box{
			padding-top: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 16rpx;
		}
		.content-box{
			margin-top: 56rpx;
			padding: 24rpx;
			background-color: #F8F8F8;
			.tip-box{
				padding-bottom: 24rpx;
				display: flex;
				align-items: center;
				gap: 6rpx;
				border-bottom: 2rpx solid #EAEAEA;
				color: #FF0D0D;
			}
			.address-box{
				margin-top: 24rpx;
				display: flex;
				gap: 24rpx;
				.box-left{
					flex: 1;
					padding: 24rpx 0;
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					.address-name{
						font-weight: 600;
					}
					.address-detail{
						color: #767473;
					}
				}
				.box-right{
					border-left: 2rpx solid #EAEAEA;
					flex-shrink: 0;
					width: 112rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 6rpx;
					color: #767473;
				}
			}
		}
		.content-btn{
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>